import { useState, useEffect } from 'react';
import { NavigationMenu, NavigationMenuItem, NavigationMenuList } from '@radix-ui/react-navigation-menu';
import { MoonIcon, SunIcon } from '@radix-ui/react-icons';
import { Link } from 'react-router-dom';

export const Layout = ({ children }: { children: React.ReactNode }) => {
  const [darkMode, setDarkMode] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // 页面加载时检查暗黑模式状态
  useEffect(() => {
    const isDarkMode = document.documentElement.classList.contains('dark');
    setDarkMode(isDarkMode);
  }, []);

  const toggleTheme = () => {
    document.documentElement.classList.toggle('dark');
    setDarkMode(!darkMode);
  };

  return (
    <div className="min-h-screen flex flex-col md:flex-row">
      <NavigationMenu
        className={`
          fixed md:sticky md:top-0 md:self-start
          w-64 h-screen bg-white dark:bg-gray-900
          transform ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'} 
          md:translate-x-0 transition-transform duration-200
          overflow-y-auto
        `}
      >
        <div className="p-4 border-r border-gray-200 dark:border-gray-800 h-full">
          <div className="flex items-center justify-between mb-8">
            <h1 className="text-xl font-bold text-gray-900 dark:text-white">Task Manager</h1>
            <button
              onClick={toggleTheme}
              className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
            >
              {darkMode ? (
                <SunIcon className="w-5 h-5 text-yellow-500" />
              ) : (
                <MoonIcon className="w-5 h-5 text-gray-600 dark:text-gray-300" />
              )}
            </button>
          </div>
          
          <NavigationMenuList className="space-y-2">
            <NavigationMenuItem>
              <Link
                to="/home"
                className="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-800 dark:text-white"
              >
                <span>首页</span>
              </Link>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <Link
                to="/library"
                className="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-800 dark:text-white"
              >
                <span>任务库</span>
              </Link>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <Link
                to="/execution"
                className="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-800 dark:text-white"
              >
                <span>任务执行</span>
              </Link>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <Link
                to="/history"
                className="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-800 dark:text-white"
              >
                <span>执行历史</span>
              </Link>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <Link
                to="/settings"
                className="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-800 dark:text-white"
              >
                <span>设置</span>
              </Link>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <Link
                to="/toast-demo"
                className="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-800 dark:text-white"
              >
                <span>Toast 演示</span>
              </Link>
            </NavigationMenuItem>
          </NavigationMenuList>
        </div>
      </NavigationMenu>

      <main className="flex-1 p-4 bg-gray-50 dark:bg-gray-900 min-h-screen">
        <div className="md:hidden mb-4">
          <button
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            className="p-2 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-white"
          >
            ☰
          </button>
        </div>
        {children}
      </main>
    </div>
  );
};